import React, {createRef } from 'react';
import { Modal, Form, Input, message, Button, Row, Col, Popconfirm } from 'antd';

const form = createRef();
const FormItem = Form.Item;
let options = [];
function VehicleBindingForm(props) {
  const { visible, titleType, onCancel, handleTboxBind, handlePdsnBind,
    confirmType, originTbox, originPdsn, setTbox,
    setPdsn, setConfirmType, tButtonLoading, pButtonLoading } = props;
  // const { getFieldDecorator } = form;
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 6 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 14 },
    },
  };
  return (
    <Modal
      visible={visible}
      title={titleType}
      onCancel={onCancel}
      options={options}
      confirmType={confirmType}
      originTbox={originTbox}
      originPdsn={originPdsn}
      footer={[
        <Button key="back" type="primary" size="default" onClick={onCancel}>
          返回
        </Button>,
      ]}
    >
      <Form ref={form}>
        <FormItem
          {...formItemLayout}
          label="VIN号"
          name="vin"
          rules={[{
            required: true, message: '',
          }]}
        >
          <Input placeholder="" disabled />
        </FormItem>

        <Row gutter={8}>
          <Col span={20}>

            <FormItem
              {...formItemLayout}
              label="TBOX编号"
              name="tbox"
              rules={[{
                required: false, message: '请输入TBOX编号',
              }]}
            >
              <Input
                placeholder="为空则解除原有绑定"
                onChange={(e) => {
                  const v = e.target.value;
                  setTbox(v);
                  if (!originTbox) {
                    if (v.trim()) {
                      confirmType[0] = '确定要绑定该TBOX吗?';
                    } else {
                      confirmType[0] = '';
                    }
                  } else if ((v) && (originTbox !== v)) {
                    confirmType[0] = '确定要绑定该TBOX吗?';
                  } else if ((v) && (originTbox === v)) {
                    confirmType[0] = '';
                  } else {
                    confirmType[0] = '确定解除与该TBOX的绑定吗?';
                  }
                  setConfirmType(confirmType);
                }}
              />
            </FormItem>
          </Col>
          <Col span={4}>
            <Popconfirm title={confirmType[0]} onConfirm={handleTboxBind}>
              <Button loading={tButtonLoading} type="primary" size="default" disabled={confirmType[0] === ''}>
                修改
              </Button>
            </Popconfirm>
          </Col>
        </Row>


        <Row gutter={8}>
          <Col span={20}>
            <FormItem
              {...formItemLayout}
              label="车机编号"
              name="pdsn"
              rules={[{
                required: false, message: '请输入车机编号',
              }]}
            >
              <Input
                placeholder="为空则解除原有绑定"
                onChange={(e) => {
                  const v = e.target.value;
                  setPdsn(v);
                  if (!originPdsn) {
                    if (v.trim()) {
                      confirmType[1] = '确定要绑定该车机吗?';
                    } else {
                      confirmType[1] = '';
                    }
                  } else if ((v) && (originPdsn !== v)) {
                    confirmType[1] = '确定要绑定该车机吗?';
                  } else if ((v) && (originPdsn === v)) {
                    confirmType[1] = '';
                  } else {
                    confirmType[1] = '确定解除与该车机的绑定吗?';
                  }
                  setConfirmType(confirmType);
                }}
              />
            </FormItem>
          </Col>
          <Col span={4}>
            <Popconfirm title={confirmType[1]} onConfirm={handlePdsnBind}>
              <Button loading={pButtonLoading} type="primary" size="default" disabled={confirmType[1] === ''}>
                修改
              </Button>
            </Popconfirm>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
}

class VehicleBindingModel extends React.Component {
  state = {
    visible: false,
    titleType: '',
    originTbox: '',
    modifyTbox: '',
    originPdsn: '',
    modifyPdsn: '',
    vin: '',
    confirmType: ['', ''],
    page: '',
    formValues: '',
    tButtonLoading: false,
    pButtonLoading: false,
    record:{} // 列表的数据  增加原因：蓝牙钥匙需要根据车系判断，直接存放源数据
  };
  componentWillMount() {
  }
  componentDidMount() {
  }
  handleCancel = () => {
    const { page, formValues } = this.state;
    const { dispatch } = this.props;
    form.current.resetFields();
    dispatch({
      type: 'vehicle/fetch',
      payload: {
        page: page.current - 1,
        size: page.pageSize,
        ...formValues,
      },
    });
    options = [];
    this.setState({
      visible: false,
      tButtonLoading: false,
      pButtonLoading: false,
    });
  }

  // 还原之前的逻辑，不做改动
  handleTboxBind = () =>{
    this.handleTboxBindWithKey();
  }
   //  抽离原有方法并替换名称  =》 原有逻辑不好改动
  handleTboxBindWithKey = () => {
    this.setState({
      tButtonLoading: true,
    });
    const { originTbox, modifyTbox, vin, record } = this.state;
    const { dispatch } = this.props;
    dispatch({
      type: 'vehicle/bindingTbox',
      payload: {
        vin,
        deviceId: modifyTbox,
        originDeviceId: originTbox,
      },
      callback: (data) => {
        if (data.code === '200') {
          message.success('操作成功');
          this.setState({
            originTbox: this.state.modifyTbox,
            confirmType: ['', this.state.confirmType[1]],
          });
        } else {
          message.error(data.description, 3);
        }
        this.setState({
          tButtonLoading: false,
        });
      },
    });
  }

  handlePdsnBind = () => {
    this.setState({
      pButtonLoading: true,
    });
    const { originPdsn, modifyPdsn, vin, record } = this.state;
    const { dispatch } = this.props;
    dispatch({
      type: 'vehicle/bindingPdsn',
      payload: {
        vin,
        deviceId: modifyPdsn,
        originDeviceId: originPdsn,
      },
      callback: (data) => {
        if (data.code === '200') {
          message.success('操作成功');
          this.setState({
            originPdsn: this.state.modifyPdsn,
            confirmType: [this.state.confirmType[0], ''],
          });
        } else {
          message.error(data.description, 3);
        }
        this.setState({
          pButtonLoading: false,
        });
      },
    });
  }

  setTbox = (tbox) => {
    this.setState({ modifyTbox: tbox });
  }
  setPdsn = (pdsn) => {
    this.setState({ modifyPdsn: pdsn });
  }
  setConfirmType = (newType) => {
    this.setState({ confirmType: newType });
  }
  showModalEdit =  async (e) => {
    console.log('@@', e);
    await this.setState({
      visible: true,
      titleType: '修改绑定关系',
      originTbox: e.tbox,
      modifyTbox: e.tbox,
      originPdsn: e.pdsn,
      modifyPdsn: e.pdsn,
      vin: e.vin,
      confirmType: ['', ''],
      page: e.page,
      formValues: e.formValues,
      record: e,
    });
    form.current.setFieldsValue({
      pdsn: e.pdsn,
      tbox: e.tbox,
      vin: e.vin,
    });
  }

  render() {
    // const confirmType = ['确定要绑定该VIN号吗?', '确定要解绑该VIN号吗?', '确定要绑定该SIM卡号吗?', '确定要解绑该SIM卡号吗?'];
    return (
      <div>
        <VehicleBindingForm
          visible={this.state.visible}
          titleType={this.state.titleType}
          onCancel={this.handleCancel}
          handleTboxBind={this.handleTboxBind}
          handlePdsnBind={this.handlePdsnBind}
          confirmType={this.state.confirmType}
          originTbox={this.state.originTbox}
          originPdsn={this.state.originPdsn}
          setTbox={this.setTbox}
          setPdsn={this.setPdsn}
          setConfirmType={this.setConfirmType}
          tButtonLoading={this.state.tButtonLoading}
          pButtonLoading={this.state.pButtonLoading}
        />
      </div>
    );
  }
}

export default VehicleBindingModel;
